<template>
  <el-dialog
    v-if="showDialog === true"
    :title="statusId ? '修改菜单' : '创建菜单'"
    @close="close"
    :visible.sync="showDialog"
  >
    <el-row type="flex" justify="center">
      <el-form
        v-if="showDialog"
        label-width="140px"
        :model="formData"
        :rules="formRules"
        ref="form"
      >
        <el-form-item label="权限组名称">
          <el-radio
            v-model="formData.is_point"
            :disabled="disabled"
            :label="false"
            >菜单</el-radio
          >
          <el-radio
            :disabled="disabled"
            v-model="formData.is_point"
            :label="true"
            >权限点</el-radio
          >
        </el-form-item>
        <el-form-item label="权限组名称" prop="formOfEmployment">
          <el-select v-model="formData.pid" placeholder="主导航">
            <!-- 遍历只能遍历组件的数据 -->
            <el-option
              v-for="item in permissionGroup"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              :disabled="item.level === 1 && formData.is_point"
            >
              {{ item | indent }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
      </el-form>
    </el-row>
    <el-row type="flex" justify="center">
      <el-button size="small" @click="showDialog = false">取消</el-button>
      <el-button size="small" type="primary" @click="btnOk">确定</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import {
  getMenuListApi,
  getPermissionListApi,
  addMenuApi,
  editMenuApi,
} from "@/api/houtai";
export default {
  name: "AddUMenu",
  data() {
    return {
      value: "",
      formData: {
        // pid必须整数
        pid: "",
        // 默认false
        is_point: false,
        code: "",
        title: "",
        id: "",
      },
      showDialog: false,
      formRules: {
        code: [
          { required: true, message: "权限代码不能为空", trigger: "blur" },
        ],
        title: [
          { required: true, message: "权限标题不能为空", trigger: "blur" },
        ],
      },
      permissionGroup: [{ id: null, code: "", title: "主导航" }],
      editId: "",
      statusId: "",
      disabled: false,
      level: 1,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    close() {
      this.formData = {};
    },
    async initData() {
      const res = await getMenuListApi();
      console.log(res);
      this.detailData(res);
    },

    // 创建和修改事件
    async btnOk() {
      if (this.statusId) {
        // 修改菜单
        try {
          await this.$message.success("修改菜单成功");
        } catch (error) {
          return console.log(error);
        }
        await editMenuApi(this.formData);
        this.showDialog = false;
        this.$emit("updateList");
      } else {
        // 创建菜单
        try {
          await this.$message.success("添加菜单成功");
        } catch (error) {
          return console.log(error);
        }
        const res = await addMenuApi(this.formData);
        console.log(res);
        this.$emit("updateList");
        this.showDialog = false;
        this.formData = {};
      }
    },
    // 封装处理数据的函数
    detailData(arr) {
      arr.forEach((item) => {
        if (item.pid === null) {
          this.level = 1;
        }
        item.level = this.level;
        this.permissionGroup.push(item);
        if (item.childs && item.childs.length > 0) {
          this.level++;
          this.detailData(item.childs);
        }
      });
    },

    // 创建菜单和编辑菜单事件
    async initPermissionList() {
      const { list } = await getPermissionListApi({
        title: "",
        page: 1,
        pagesize: 10,
      });
      console.log(list);
      this.permissionGroup = list;
    },
  },
  filters: {
    indent(val) {
      let str = "";
      for (let i = val.level; i > 0; i--) {
        str += "　";
      }
      return str + val.title;
    },
  },
};
</script>
<style scoped>
</style>